<template>
  <el-row ref="radarWrap" class="radarWrap">
    <el-row class="title" type="flex" justify="space-between">
      <el-col type="flex">
        <el-col style="width: 26px">
          <img height="24" src="../../../assets/images/left.png"/>
        </el-col>
        <el-col align="center" style="line-height: 40px;width: 200px">{{ $store.getters.getLocation }}视频综合质量</el-col>
        <el-col style="width: 26px">
          <img height="24" src="../../../assets/images/right.png"/>
        </el-col>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top:10px;height: calc(100% - 60px)">
      <FourBarCharts
        ref="bottomBar"
        :chartData="chartData"
        :colors="'rgba(137, 97, 253'"
        :title="'视频名称'"
      />
    </el-row>
  </el-row>
</template>

<script>
  import FourBarCharts from './FourBarCharts'
  export default {
    name: "Radar",
    components: {
      FourBarCharts
    },
    data() {
      return {
        chartData: {
          valueList: [],
          bgList: [],
          dataList: []
        },
        chartName: [],
        total: '',
        online: '',
        radarWidth: '',
        radarHeight: ''
      }
    },
    created() {
      this.$bus.$off('provinceChanged')
      this.$bus.$on('provinceChanged', this.getProbes)
    },
    methods: {
      getProbes(code){
        window._api.apiQualityAnalyseFive({ user_code: code }).then(res => {
          if (res.state === 0) {
            this.chartData.dataList = []
            this.chartData.valueList = []
            this.chartData.bgList = []
            res.data.map(item => {
              this.chartData.dataList.push({ name: item.flash_website, value: item.score })
              this.chartData.valueList.push(item.score)
              this.chartData.bgList.push(100)
            })
          } else {
            this.$message.warning('数据异常')
          }
        })
      }
    }
  }
</script>

<style scoped>
.radarWrap{
  height: 44vh;
  background: rgba(0,33,135,0.24);
  border: 1px solid rgba(14,101,187,0.46);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  padding: 8px 18px;
}
.title{
  font-size: 20px;
  line-height: 50px;
  height: 50px;
  text-align: left;
  padding: 0px 16px;
  color: #00DDFF;
  font-weight: bold;
}
</style>
